<template>
  <div class="kystop-bar">
    <div class="kysheader-box">
      <div class="kystop-reg-log l">
        <span class="kysgo-log">
          <nuxt-link to="/" class="userloginbtn">
            欢迎回来，{{ user.userName }}</nuxt-link>
          <a @click="doLogout" class="layui-btn layui-btn-primary layui-btn-xs"
            style="color: #999;">退出</a>
        </span>
      </div>
      <div class="kystop-r-menu">
        <ul class="kysfix">
          <li class="kyskyst-item"><nuxt-link to="/orders4">我的订单</nuxt-link></li>
          <li class="kyskyst-item"><nuxt-link to="/complain4">我的投诉</nuxt-link></li>
          <li class="kyst-item"><nuxt-link to="/charge4" class="topchongzhi layui-btn">充值</nuxt-link></li>
          <li class="kyskyst-item"><nuxt-link to="/contact4" class="topkf" style="border-left: 1px solid #999;">联系客服</nuxt-link></li>
          <li class="kyst-item" style="padding: 0 1px;"><nuxt-link to="/account4" class="topkf" style="padding: 0 1px;">个人中心</nuxt-link></li>
          <!-- <li class="kyskyst-item"><a href="/orders4">我的订单</a></li>
          <li class="kyskyst-item"><a href="/complain4">我的投诉</a></li>
          <li class="kyst-item"><a href="/charge4"
                                   class="topchongzhi layui-btn">充值</a></li>
          <li class="kyskyst-item">
            <a onclick="return confirm(&#39;有事请直奔主题,不要问在不在&#39;)"
               :href="systemStyle.qqLink"               class="topkf" target="_blank" style="border-left: 1px solid #999;">联系客服</a>
          </li>
          <li class="kyst-item" style="padding: 0 1px;">
            <a href="/account4" class="topkf" style="padding: 0 1px;">个人中心</a></li> -->
          <!--          <li  class="kyst-item" style="padding: 0 1px;" v-for="(item, index) in linkMenuDataTop" :key="index" v-if="index < 3">-->
          <!--                <a class="topkf" style="padding: 0 1px;" v-if="item.menuTips" target="_blank" :href="item.menuLink">{{-->
          <!--                    item.menuName-->
          <!--                  }}</a>-->
          <!--          </li>-->
          <!--            <li class="kyst-item" style="padding: 0 1px;"  v-else>-->
          <!--              <a class="topkf"-->
          <!--                 style="padding: 0 1px;" target="_blank" :href="item.menuLink">{{-->
          <!--                  item.menuName-->
          <!--                }}</a>-->
          <!--            </li>-->

        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import user from '@/common/user'

export default {
  props: {
    supply: {
      type: Boolean,
      default: false
    },

  },
  computed: {
    ...mapState({
      user: (state) => state.user,
      isSupply: (state) => false,
      systemStyle: (state) => state.systemStyle
    })
  },
  methods: {
    doLogout() {
      user.removeToken(this.$cookies)
      this.$router.push('/')

    }
  }
}
</script>
<style lang="scss" scoped>
// @import 'assets/style/layer.css';
// @import 'assets/style/layui.css';
// @import 'assets/style/style2/common.css';
// @import 'assets/style/style2/openlogin.css';
// @import 'assets/style/style2/style.css';
// @import 'assets/style/style2/font_1451715_0505c2bxv7b7.css';
.layui-btn {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  padding: 0 18px;
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid #C9C9C9;
  background-color: #fff;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
  height: 22px;
  line-height: 22px;
  padding: 0 5px;
  font-size: 12px;
  color: #999;
}
</style>
<style scoped>
.kystop-bar {
    position: relative;
    z-index: 3;
    height: 36px;
    background: #ffffff;
    color: #a1a1a1;
    min-width: 1200px;
}
.kysheader-box {
    width: 1200px;
    margin: 0 auto;
}
.kystop-reg-log.l {
    float: left;
    position: relative;
    left: 5px;
}
span.kysgo-log {
    position: relative;
    z-index: 3;
    height: 36px;
    line-height: 32px;
    color: #a1a1a1;
    min-width: 1200px;
}
.kystop-r-menu {
    text-align: right;
}
ul.kysfix {
    list-style: none;
    float: right;
    position: relative;
    display: inline-block;
    height: 36px;
    text-align: left;
    line-height: 30px;
}
li.kyskyst-item {
    position: relative;
    display: inline-block;
    height: 36px;
    text-align: left;
    line-height: 30px;
}
.topchongzhi {
    font-size: 12px;
    display: inline-block;
    padding: 0 10px;
    height: 24px;
    line-height: 24px;
    color: #fff;
    background: #0089ed;
    border-radius: 4px;
    vertical-align: 0;
}
li.kyst-item {
    position: relative;
    display: inline-block;
    height: 36px;
    padding: 0 8px;
    text-align: left;
    line-height: 30px;
}
.kysquick-log a {
	display: inline-block;
    padding: 0 6px;
    height: 24px;
    line-height: 24px;
    color: #fff;
    background: #0089ed;
    border-radius: 2px;
    vertical-align: 0;
}
.kyskyst-item a {
	font-size: 12px;
    padding: 0 8px;
    border-right: 1px solid #999;
}
.topkf {
	font-size: 12px;
    padding: 0 15px;
}

</style>
<style lang="scss" scoped>

.kystop-bar {
  min-width: unset !important;
  width: 1172px;
  margin: auto;
  .kysheader-box {
    width: 100% !important;
  }
}
</style>
